<?php include('cms.php'); Cms::nocache(); Session::must(); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?=$strings['userEditor']?></title>
<link rel="stylesheet" type="text/css" href="css/cms.css"/>
<link rel="stylesheet" type="text/css" href="css/editor.css"/>
<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.1.custom.css"/>
<script type="text/javascript" src="strings.php?js"></script>
<script type="text/javascript" src="/cms/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/cms/js/jquery-ui-1.8.1.custom.min.js"></script>
<style>
	
	#title{
		position:absolute;
		top:0;
		left:0;
		height:50px;
		right:0;
		background:#333;
		color:white;
	}
	
	#mainToolbar{
		position:absolute;
		top:50px;
		height:30px;
		right:0;
		left:0;
	}
	
	#list{
		position:absolute;
		top:82px;
		left:0;
		width:300px;
		bottom:20px;
		background:#f0f0f0;
	}
	
	#detail{
		position:absolute;
		top:82px;
		left:300px;
		right:0;
		bottom:20px;
		padding:15px;
	}
	
	#statusbar{
		position:absolute;
		left:0;
		height:20px;
		right:0;
		bottom:0;
	}
	
	#title h1{
		margin:10px 0 0 10px; 
		padding:0 0 0 0;
	}
	
	#list ul{
		list-style:none;
		margin:0;
		padding:0;
	}
	#list li{
		padding:5px;
		border:solid 1px transparent;
		cursor:default;
	}
	
	#list li:hover{
		background:#76A9DC;
		border:solid 1px #06c;
	}
	
	#list li.selected{
		background:#FFCC7F;
		border:solid 1px #F90;
	}
	
	#list .id { display:none; }
	
	#list .nick{
		font-weight:bold;
	}
	
	#list .mail{
		padding-left:1em;
		color:#999;
	}
	
	#detail div{
		margin:10px;
	}
	
	#detail input[type="text"]{
		padding:4px;
	}
	
	#detail textarea{
		width:80%;
		height:5em;
	}
	
	
</style>
<script>

	if (!Array.prototype.forEach){
	  Array.prototype.forEach = function(fun){
		var len = this.length >>> 0;
		if (typeof fun != "function") throw new TypeError();
	
		var thisp = arguments[1];
		for (var i = 0; i < len; i++){
		  if (i in this)
			fun.call(thisp, this[i], i, this);
		}
	  };
	}
	
	function deleteSelectedUser(){
		
		if( $('#detail form').length == 0 ){
				alert(strings.selectUserFirst);
			return;
		}
		
		if(!confirm(strings.deleteTheUserQuestion + ' (' + $('#detail #nick').val()  + ')')){
			return;
		}
		
		status(strings.deleteingUser, true);
		
		$.post('user.set.php', { deleteuser: $('#detail #iduser').val() },
			function(data){
				if(data != 'OK'){
					alert(data);
				}
				status();
				loadUsers();
			});
		
	}
	
	function saveData(silent){
		
		if( $('#detail form').length == 0 ){
			if(!silent){
				alert(strings.selectUserFirst);
			}
			return;
		}	
		
		status(strings.saving, true);
		
		$.post('user.set.php',
			   {
				   	iduser: $('#detail #iduser').val(),
					mail: $('#detail #mail').val(),
					nick: $('#detail #nick').val(),
					level: $('#detail #level').val(),
					admin: ($('#detail #admin').is(':checked') ? 1 : 0),
					signature: $('#detail #signature').val()
			   }, 
			   function(data){
				   if(data != 'OK'){
					   alert(data);
				   }
				   status();
				   
				   //$('#list .selected .nick').text($('#detail #nick').val());
				   //	$('#list .selected .mail').text($('#detail #mail').val());
				   
			   });
		
	}
	
	function status(message, loader){
		
		var s = $('#statusbar');
		
		if(!message){
			status(strings.ready);
			return;
		}
		
		s.html('');
		
		if(loader){
			s.append($('<img>').attr({'src': 'css/loader.gif', 'align': 'absmiddle', 'hspace': 3}));
		}
		
		s.append(message);
		
	}

	function loadDetail(li){
		
		saveData(true);
		
		$('#list .selected').removeClass('selected');
		$(li).addClass('selected');
		$('#detail').html('');
		
		var id = $(li).find('.id').text();
		
		
		status(strings.loadingUserData, true);
		
		$.getJSON('user.get.php', { 'iduser': id }, 
			function(user){
				if(user){
					createDetail(user[0]);
				}else{
					alert(strings.errorLoadingUser);
				}
				status();
			});
	}
	
	function createDetail(user){
		$('#detail').append(
				$('<form>')
					.submit(function(){ return false; })
					.append( $('<input>').attr({ 'type': 'hidden', 'id': 'iduser'}).val(user.iduser) )
					.append( $('<div>').text(strings.userEmail) )
					.append( $('<input>').attr({ 'type': 'text', 'id': 'mail'}).val(user.mail) )
					.append( $('<div>').text(strings.userNickname) )
					.append( $('<input>').attr({ 'type': 'text', 'id': 'nick'}).val(user.nick) )
					.append( $('<div>').text(strings.userLevel) )
					.append( $('<input>').attr({ 'type': 'text', 'id': 'level'}).val(user.level) )
					.append( $('<input>').attr({ 'type': 'checkbox', 'id': 'admin', 'checked': (user.admin == 1 ? true : false)}) )
					.append( $('<span>').text(strings.userAdmin) )
					.append( $('<div>').text(strings.userSignature) )
					.append( $('<textarea>').attr({ 'id': 'signature' }).val(user.signature) )
			);
	}

	function loadUsers(){
		
		$('#list ul').html('');
		
		status(strings.wait, true);
		
		$.getJSON('user.get.php', {},
				  function(data){
				  	if(!data){
						alert(strings.errorLoadingUsers);
					}else{
						data.forEach(function(user){
							$('#list ul')
								.append( 
									$('<li>')
										.append( $('<div>').addClass('icon icon-user') )
										.append( $('<div>').addClass('id').text(user.iduser) )
										.append( $('<span>').addClass('nick').text(user.nick) )
										.append( $('<span>').addClass('mail').text(user.mail) )
										.click(function(){ loadDetail(this); })
							);
						});
					}
					$('#detail').html('');
					status();
				  });
		
	}

	function createNewUser(){
		
		var mail = prompt(strings.enterNewUserMail, "");
		
		if(!mail) return;
		
		
		status(strings.wait, true);
		
		$.post('user.set.php', { newuser: mail },
			   function(data){
				   if(data != 'OK'){
					   alert(data);
				   }else{
					   loadUsers();
				   }
				});
		
	}
	
	function changePassword(){
		if( $('#detail form').length == 0 ){
				alert(strings.selectUserFirst);
			return;
		}
		
		$('<div>')
			.attr({'id': 'passdialog', title: strings.changePassword})
			.append(
					$('<form>')
						.append( $('<p>').text(strings.changePasswordOf + " " + $('#detail #nick').val()) )
						.append( $('<div>').text(strings.newPassword) )
						.append( $('<input>').attr({'type' : 'password', 'id': 'newpass'}) )
						.append( $('<div>').text(strings.repeatNewPassword) )
						.append( $('<input>').attr({'type' : 'password', 'id': 'newpass2'}) )
						.append( $('<input>').attr({'type' : 'submit'}).val(strings.changePassword) )
						.submit(function(){ 
										 
							if(!$('#newpass').val()){
								alert(strings.passwordCantBeEmpty);
								return false;
							}
							
							if($('#newpass').val() != $('#newpass2').val()){
								alert(strings.passwordsDoesntMatch);
								return false;
							}
							
							status(strings.wait, true);
							
							$('#passdialog input[type="submit"]').attr('disabled', true);
							
							$.post('user.set.php', { iduser: $('#detail #iduser').val(), newpass: $('#newpass').val() }, 
							function(data){
								if(data != 'OK'){
									alert(data);
								}else{
									alert(strings.paswordChangedOk);
								}
								status();
								$('#passdialog').dialog('close');
							});
							
							return false; 
						})
						
					)
			.dialog({ modal:true });
		
	}
	
	

	$(function(){
		
		$('.icon-refresh').parent()
			.attr('title', strings.refreshUserList)
			.click(function(){ loadUsers(); });
		
		$('.icon-save').parent()
			.attr('title', strings.save)
			.click(function(){ saveData(); });
		
		$('.icon-newuser').parent()
			.attr('title', strings.createUser)
			.click(function(){ createNewUser(); });
		
		$('.icon-rename').parent()
			.attr('title', strings.changePassword)
			.click(function(){ changePassword(); });
		
		$('.icon-remove').parent()
			.attr('title', strings.deleteUser)
			.click(function(){ deleteSelectedUser(); });
			
		loadUsers();
		
	});//End on document ready

</script>
</head>
<body>
    <div id="title">
    	<h1><?=$strings['userEditor']?></h1>
    </div>
    <div id="mainToolbar" class="toolbar" style="float:left;">
        	<button><div class="icon icon-refresh"></div></button>
            <button><div class="icon icon-newuser"></div></button>
            <div class="separator"></div>
            <button><div class="icon icon-rename"></div></button>
            <button><div class="icon icon-save"></div></button>
            <div class="separator"></div>
            <button><div class="icon icon-remove"></div></button>
        </div>
    <div id="list">
    	<ul>
        </ul>
    </div>
    <div id="detail">
    </div>
    <div id="statusbar"></div>
</body>
</html>